<template>
    <div>
        <el-button type="primary" size="small" plain @click="generate">WORD导出_kzy</el-button>
    </div>
</template>
<script setup>
import { ref } from 'vue';
import docxtemplater from 'docxtemplater';
import { saveAs } from 'file-saver';
import 'pizzip/dist/pizzip.js'
import 'pizzip/dist/pizzip-utils.js'
import ImageModule from 'docxtemplater-image-module-free';
import { getBase64Sync, base64DataURLToArrayBuffer } from '@/utils/imageUtils'; // 确保你已经创建了这个 utils 文件并导出了相关函数
import expressionParser from 'docxtemplater/expressions'
const loadFile = (url, callback) => {
    PizZipUtils.getBinaryContent(url, callback);
}
const generate = async () => {
    // const res = await GetPaperCompleteInfo(props.paperId);
    // const answer1 = res.data.data;
    // console.log("answer1", answer1);
    // const imageUrl = '/public/image.png';
    // const imageBase64 = await getBase64Sync(imageUrl);
    // const data = {
    //     questionInfoByType: [
    //         {
    //             type: "多项选择题",
    //             num: 10,
    //             score: 20,
    //             src: imageBase64,
    //             questions: [
    //                 {
    //                     questionContent: "多项选择题题干1",
    //                     options: [
    //                         "a0000  ", "B  \n", "C  ", "D  \n"
    //                     ]
    //                 },
    //                 {
    //                     questionContent: "多项选择题题干2",
    //                 },
    //                 {
    //                     questionContent: "多项选择题题干3",
    //                 },
    //             ]
    //         },
    //         {
    //             type: "单项选择题",
    //             num: 20,
    //             score: 200,
    //             src: imageBase64,
    //             questions: [
    //                 {
    //                     questionContent: "题干1",
    //                     options: [
    //                         "a0000  ", "B  \n", "C  ", "D  \n"
    //                     ]
    //                 },
    //                 {
    //                     questionContent: "题干2",
    //                     options: [
    //                         "a111  ", "B  \n", "C  ", "D  \n"
    //                     ]
    //                 },
    //                 {
    //                     questionContent: "题干3",
    //                     options: [
    //                         "a222  ", "B  \n", "C  ", "D  \n"
    //                     ]
    //                 },
    //             ]
    //         },
    //         {
    //             type: "填空题",
    //             num: 10,
    //             score: 10,
    //             src: imageBase64,
    //             questions: [
    //                 {
    //                     questionContent: "填空题题干1",
    //                 },
    //                 {
    //                     questionContent: "填空题题干2",
    //                 },
    //                 {
    //                     questionContent: "填空题题干3",
    //                 },
    //             ]
    //         },
    //     ]
    // }
    const testData={
        // （四）课程目标达成度
        returnTargetAchievement: [
            {
                courseObjective: "课程目标1",
                supportLinks: "作业 课堂表现 试卷集合 ",
                completion: 0.62
            },
            {
                courseObjective: "课程目标2",
                supportLinks: "作业 课堂表现 试卷集合 ",
                completion: 1.21
            },
            {
                courseObjective: "课程目标3",
                supportLinks: "作业 课堂表现 试卷集合",
                completion: 1.34
            },
            {
                courseObjective: "课程目标4",
                supportLinks: "作业 课堂表现 试卷集合",
                completion: 2.1
            }
        ],
        // 支撑环节3
        returnCorseMes: [
            {
                courseObjective: "课程目标1",
                totalValue: 20,
                averageScore: 12,
                completion: 0.6
            },
            {
                courseObjective: "课程目标2",
                totalValue: 20,
                averageScore: 13,
                completion: 0.65
            },
            {
                courseObjective: "课程目标3",
                totalValue: 20,
                averageScore: 20,
                completion: 1
            },
        ],
        // 支撑环节2
        returnTaskMes: [
            {
                courseObjective: "课程目标1",
                totalValue: 20,
                averageScore: 10,
                completion: 0.5
            },
            {
                courseObjective: "课程目标2",
                totalValue: 20,
                averageScore: 20,
                completion: 1
            },
            {
                courseObjective: "课程目标3",
                totalValue: 20,
                averageScore: 15,
                completion: 0.75
            },
        ],
        //支撑环节1
        returnnewArray: [
            {
                courseObjective: "课程目标1",
                totalValue: 45,
                averageScore: 30,
                completion: 0.6666666666666666
            },
            {
                courseObjective: "课程目标2",
                totalValue: 30,
                averageScore: 44,
                completion: 1.4666666666666666
            },
            {
                courseObjective: "课程目标3",
                totalValue: 20,
                averageScore: 31.93,
                completion: 1.5965
            },
        ],
        returnAssessment:[
            {
                supportLink: "课堂表现",
                weight: 0.2,
                courseObjective: "课程目标1"
            },
            {
                supportLink: "作业",
                weight: 0.2,
                courseObjective: "课程目标1"
            },
            {
                supportLink: "试卷集合",
                weight: 0.6,
                courseObjective: "课程目标1"
            },
            {
                supportLink: "课堂表现",
                weight: 0.2,
                courseObjective: "课程目标2"
            },
            {
                supportLink: "作业",
                weight: 0.2,
                courseObjective: "课程目标2"
            },
            {
                supportLink: "试卷集合",
                weight: 0.6,
                courseObjective: "课程目标2"
            }
        ],
        // 课程目标与毕业要求的矩阵关系图
        returnTargetPoint: [
            {
                targetName: "课程目标1",
                pointName: "毕业要求指标点 1.2",
                pointDeep: "L"
            },
            {
                targetName: "课程目标2",
                pointName: "毕业要求指标点2.1",
                pointDeep: "L"
            },
            {
                targetName: "课程目标3",
                pointName: "毕业要求指标点3.3",
                pointDeep: "L"
            },
        ],
        //课程目标内容
        returnTarget: [
            {
                targetName: "课程目标1",
                targetContent: "也让他有"
            },
            {
                targetName: "课程目标2",
                targetContent: "十在计属次第向后两各小铁查容。"
            },
            {
                targetName: "课程目标3",
                targetContent: "十在计属次第向后两各小铁查容。"
            },
            {
                targetName: "课程目标4",
                targetContent: "none"
            }
        ],
        returnClassMes: [
            {
                item: "课程编号",
                content: "1008611"
            },
            {
                item: "课程名称",
                content: "软件工程"
            },
            {
                item: "学时/学分",
                content: "86/8"
            },
            {
                item: "课程性质",
                content: "专业必修"
            },
            {
                item: "授课对象",
                content: " 钟秀玉"
            }
        ],
    }
    loadFile("/public/template.docx", function (error, content) {
        if (error) {
            throw error;
        };
        let zip = new PizZip(content);
        // const imageModule = new ImageModule({
        //     getImage: (tagValue) => base64DataURLToArrayBuffer(tagValue),
        //     getSize: () => [90, 45] //设置图片大小
        // });
        const doc = new docxtemplater(zip, {
            // modules: [imageModule],
            linebreaks: true,
            parser: expressionParser
        });
        doc.setData(testData);
        try {
            doc.render();
        } catch (error) {
            let e = {
                message: error.message,
                name: error.name,
                stack: error.stack,
                properties: error.properties,
            };
            console.log(JSON.stringify({ error: e }));
            throw error;
        }
        let out = doc.getZip().generate({
            type: "blob",
            mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
        });
        saveAs(out, "导出的WORD.docx");
    });
}
</script>

<style scoped></style>
